<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <div class="box">
    <div class="title">

      <!-- 单价 -->
      <div class="bar price">单价</div>

      <!-- 数量 -->
      <div class="bar num">数量</div>

      <!-- 小计 -->
      <div class="bar totle">小计</div>

      <!-- 操作 -->
      <div class="bar done">操作</div>
    </div>
    <div class="content">
      <div class="item">

        <!-- 图片展示 -->
        <div class="imgShow left">
          <img src="imgs/hr.jpg" alt="">
        </div>

        <!-- 文字内容 -->
        <div class="text left">
          <p>荣耀20i 3200万AI自拍 超广角三摄 全</p>
          <p>荣耀20i 3200万AI自拍 超广角三摄 全</p>
        </div>

        <!-- 单价 -->
        <div class="s-price left">
          &yen; <strong>1299.00</strong>
        </div>

        <!-- 数量 -->
        <div class="num1 left">
          <a href="javascript:;" class="sub">-</a>
          <input type="text" value="1">
          <a href="javascript:;" class="add">+</a>
        </div>

        <!-- 总结 -->
        <div class="t_price left">
          &yen;<strong>1299.00</strong>
        </div>

        <!-- 删除 -->
        <div class="del left">
          <a href="javascript:;">移除购物车</a>
        </div>
      </div>
      <div class="item">

        <!-- 图片展示 -->
        <div class="imgShow left">
          <img src="imgs/hr.jpg" alt="">
        </div>

        <!-- 文字内容 -->
        <div class="text left">
          <p>荣耀20i 3200万AI自拍 超广角三摄 全</p>
          <p>荣耀20i 3200万AI自拍 超广角三摄 全</p>
        </div>

        <!-- 单价 -->
        <div class="s-price left">
          &yen;<strong>1299.00</strong>
        </div>

        <!-- 数量 -->
        <div class="num1 left">
          <a href="javascript:;" class="sub">-</a>
          <input type="text" value="1">
          <a href="javascript:;" class="add">+</a>
        </div>

        <!-- 总结 -->
        <div class="t_price left">
          &yen;<strong>1299.00</strong>
        </div>

        <!-- 删除 -->
        <div class="del left">
          <a href="javascript:;">移除购物车</a>
        </div>
      </div>
      <div class="item">

        <!-- 图片展示 -->
        <div class="imgShow left">
          <img src="imgs/hr.jpg" alt="">
        </div>

        <!-- 文字内容 -->
        <div class="text left">
          <p>荣耀20i 3200万AI自拍 超广角三摄 全</p>
          <p>荣耀20i 3200万AI自拍 超广角三摄 全</p>
        </div>

        <!-- 单价 -->
        <div class="s-price left">
          &yen;<strong>1299.00</strong>
        </div>

        <!-- 数量 -->
        <div class="num1 left">
          <a href="javascript:;" class="sub">-</a>
          <input type="text" value="1">
          <a href="javascript:;" class="add">+</a>
        </div>

        <!-- 总结 -->
        <div class="t_price left">
          &yen;<strong>1299.00</strong>
        </div>

        <!-- 删除 -->
        <div class="del left">
          <a href="javascript:;">移除购物车</a>
        </div>
      </div>
    </div>
    <div class="bot">



      <!-- 清空购物车 -->
      <a href="javascript:;" class="clear_p left">清空购物车</a>

      <!-- 商品总数 -->
      <div class="product_num left">
        已购买
        <strong>0</strong>
        件商品
      </div>

      <!-- 商品总价 -->
      <div class="product_money left">
        总价:
        <strong>00.00</strong>
      </div>

    </div>
  </div>


</body>

</html>